import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Cell, Image } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './achievement.less';

const goBack = () => {
  history.back();
}

const goPromotion = () => {
  history.push('/promotion');
}

export default function AchievementPage() {
  return (
    <div className='achievement'>
      <NavBar title='我的业绩' leftText='返回' rightText='我要推广' onClickLeft={goBack} onClickRight={goPromotion} />
      <div className='achievement-list'>
        <Flex align='center' justify='between' className='achievement-title'>
          <Flex.Item className='month'>2024年6月</Flex.Item>
          <Flex.Item className='total'>共5笔订单 业绩¥5332.33 佣金¥533.33</Flex.Item>
        </Flex>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/ee4832a5250e0043fdf026604dcd2ee5.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>大灰狼-下单</div>
                  <div className='achievement-item-time'>06-14 21:48 密室逃脱</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>1200</span>.00</div>
                <div className='kickback'>佣金 <span>120</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>菲利-下单</div>
                  <div className='achievement-item-time'>06-14 21:48 微醺小酌</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>990</span>.00</div>
                <div className='kickback'>佣金 <span>99</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>菲利-下单</div>
                  <div className='achievement-item-time'>06-13 21:48 微醺小酌</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>990</span>.00</div>
                <div className='kickback'>佣金 <span>99</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>菲利-下单</div>
                  <div className='achievement-item-time'>06-12 21:48 微醺小酌</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>1500</span>.00</div>
                <div className='kickback'>佣金 <span>150</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>菲利-下单</div>
                  <div className='achievement-item-time'>06-12 21:48 微醺小酌</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>1600</span>.00</div>
                <div className='kickback'>佣金 <span>160</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Flex align='center' justify='between' className='achievement-title'>
          <Flex.Item className='month'>2024年5月</Flex.Item>
          <Flex.Item className='total'>共5笔订单 业绩¥5332.33 佣金¥533.33</Flex.Item>
        </Flex>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/ee4832a5250e0043fdf026604dcd2ee5.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>大灰狼-下单</div>
                  <div className='achievement-item-time'>06-14 21:48 密室逃脱</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>1200</span>.00</div>
                <div className='kickback'>佣金 <span>120</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>菲利-下单</div>
                  <div className='achievement-item-time'>06-14 21:48 微醺小酌</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>990</span>.00</div>
                <div className='kickback'>佣金 <span>99</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='achievement-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='achievement-item-title'>菲利-下单</div>
                  <div className='achievement-item-time'>06-13 21:48 微醺小酌</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='achievement-item-sum'>
                <div className='change'><span>990</span>.00</div>
                <div className='kickback'>佣金 <span>99</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
